<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch_"
      :label-width="labelWidth"
    >

      <el-form-item  :label="item.label+'：'" v-for="(item,index) in quaryList_" :key = 'index'>
         <component :type="item.type"
                    clearable
                    :is="item.component"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :value-format="item.valueFormat"
                    :placeholder="(item.component === 'el-input'?'请输入':'请选择')+item.label"
                    v-model="queryParams[item.prop]">
           <template v-if="item.component === 'el-select'">
             <el-option
               v-for="(e,idx) in  item.options"
               :key="idx"
               :label="item.optionsKeys ? e[item.optionsKeys.label] : e.label"
               :value="item.optionsKeys ? e[item.optionsKeys.value] : e.value">
             </el-option>
           </template>
         </component>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="flex-row-between mt-2">
      <template>
        <el-button v-if="showAdd" size="mini" type="primary" @click="addOne">新增</el-button>
        <div v-else></div>
      </template>

      <el-row :gutter="10" class="mb8">
        <a-right-tool
            :showSearch.sync="showSearch_"
            @queryTable="resetQuery"
            :columns="columns_"
        />
      </el-row>
    </div>

  </div>
</template>
<script>

import _ from "lodash";

export default {
  props:{
    showAdd:{
      type:Boolean,
      default:true
    },
    quaryList:{
      type:Array,
      default:()=>[]
    },
    showSearch:{
      type:Boolean,
      default:true
    },
    columns:{
      type:Array,
      default:()=>[]
    },
    labelWidth:{
      type:String,
      default:'100px'
    }
  },
  data(){
    return{
      showSearch_:this.showSearch,
      quaryList_:undefined,
      queryParams:{},
      columns_:[]
    }
  },
  methods:{
    parseQueryParams(){
      let query = {}
      console.log('queryList:',this.quaryList_)
      this.quaryList_.forEach(e=>{
        query[e.prop] = undefined
      })
      return query
    },
    addOne(){
      this.$emit('addOne')
    },
    handleQuery(){
      const timeRangeObj =  this.quaryList_.find(i => i.component === 'el-date-picker' && i.type === 'daterange')
      console.log(timeRangeObj)
      if(timeRangeObj){
        const timeValue = this.queryParams[timeRangeObj?.prop]
        if(Array.isArray(timeValue)){
          this.queryParams.startTime = timeValue[0] ? timeValue[0] + ' 00:00:00' : undefined
          this.queryParams.endTime = timeValue[1] ? timeValue[1] + ' 23:59:59' :undefined
        }else{
          delete this.queryParams.startTime
          delete this.queryParams.endTime
        }
      }
      this.$emit('search',Object.assign(this.queryParams,{pageNum:1,pageSize:10}))
    },
    resetQuery(){
      this.queryParams = this.parseQueryParams()
      this.$emit('search',Object.assign(this.queryParams,{pageNum:1,pageSize:10}))
    }
  },
  mounted() {
    this.handleQuery()
  },
  watch:{
    columns:{
      handler(e){
        if (e){
          this.columns_ = e.map((item,index)=>{
            this.$set(item,'key',index)
            this.$set(item,'visible',true)
            return item
          })
        }
      },
      immediate:true
    },
    quaryList:{
      async handler(newVal, oldVal) {
        this.quaryList_ = _.cloneDeep(newVal)
        this.queryParams = this.parseQueryParams()
        for (const item of  this.quaryList_) {
          if(item.options instanceof Promise){
            item.options = (await item.options).data
          }
        }

      },
      immediate:true,
      deep:true
    },
  }

}
</script>
<style scoped lang="scss">

</style>
